<template>
  <div class="home-container">

    <!--  Layout 只是一个盒子,其下可嵌套 Header Sider Content Footer或 Layout  -->
    <Layout :style="{minHeight: '100vh'}">
      <!-- 侧边栏 -->
      <Sider ref="sider"
             :collapsible="true"
             :collapsed-width="78"
             hide-trigger
             v-model="collapseFlag">

        <MenuList></MenuList>
      </Sider>

      <!-- 右侧 -->
      <Layout>

        <Header :style="{padding: 0,backgroundColor:'#FFF'}">
          <div class="header-box">
            <MyHeader :collapseFlag="collapseFlag"></MyHeader>
          </div>
        </Header>

        <Content :style="{padding: 0,display:'flex',backgroundColor:'#AAA'}">
          <div class="content-box">


            <div v-if="currentComponent=='chart'">
              <Chart></Chart>
            </div>

            <div v-if="currentComponent=='subject'">
              <Subject></Subject>
            </div>

            <div v-if="currentComponent=='course'">
              <Course></Course>
            </div>
            <div v-if="currentComponent=='topic'">
              <Topic></Topic>
            </div>
            <div v-if="currentComponent=='question'">
              <Question></Question>
            </div>


            <div v-if="currentComponent=='user'">
              <User></User>
            </div>
            <div v-if="currentComponent=='role'">
              <Role></Role>
            </div>
            <div v-if="currentComponent=='menu'">
              <Menu></Menu>
            </div>
            <div v-if="currentComponent=='file'">
              <File></File>
            </div>
            <div v-if="currentComponent=='test'">
              <Test></Test>
            </div>

          </div>
        </Content>
      </Layout>

    </Layout>
  </div>
</template>

<script>
import MenuList from "@/components/home/MenuList"
import MyHeader from "@/components/home/MyHeader";
//首页
import Chart from "@/components/chart/Chart"
//课程
import Subject from "@/components/course/Subject"
import Course from "@/components/course/Course"
import Question from "@/components/question/Question"
import Topic from "@/components/course/Topic"
//系统
import User from "@/components/sys/User";
import Menu from "@/components/sys/Menu";
import Role from "@/components/sys/Role";
import File from "@/components/sys/File";
//测试
import Test from "@/views/Test";

export default {
  //组件名称
  name: "Home",
  props: [],
  //组件注册
  components: {
    MenuList, MyHeader,
    Chart,
    Subject, Course, Topic, Question,
    User, Role, Menu, File,
    Test
  },
  //数据驱动
  data() {
    return {
      //侧边栏状态 true 收缩,false 放大
      collapseFlag: false,
      currentComponent: ""
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {},
  created() {
    this.bus.$on("my-event-content", (component) => {
      this.currentComponent = component
    })
  },
  mounted() {
    //切换侧边栏收缩状态
    let _this = this;
    this.bus.$on("my-event-change-collapsed", (data) => {
      _this.$refs.sider.toggleCollapse()
    })
  },
}
</script>

<style lang="less" scoped>

.header-box {

}

@gap: 6px;
/deep/ .content-box {
  width: calc(100% - @gap);
  margin-top: @gap;
  margin-left: @gap;
  background-color: #FFF;
  border-radius: 4px;
}
</style>